/* slider container */
.slider {
   width: 100%;
   height: 320px;
   position: relative;
}

/* slide images */
.slider .slide {
   position: absolute;
   width: 100%;
   height: auto;
   display: block;
   opacity: 0;
   transition: all 2s ease 0s;
}

.slider .slide.active{
   opacity: 100%;
   transition: all 2s ease 0s;
}

/* slide images */
.slider img {
   width: 100%;
   height: auto;
   display: block;
}

/* slide captions */
.slider .caption {
   position: absolute;
   bottom: 20px;
   left: 0;
   right: 0;
   text-align: center;
   color: #fff;
   font-size: 20px;
   font-weight: bold;
}

.slider .dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background-color: #C5C5C5;
   margin: 0 0.5em;
   cursor: pointer;
}

.slider .dot.active {
   background-color: #333;
}

/* navigation buttons */
.slider .prev,
.slider .next {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background-color: rgba(0,0,0,0.5);
   color: #fff;
   font-size: 20px;
   padding: 10px 15px;
   cursor: pointer;
}

.slider .prev {
   left: 20px;
}

.slider .next {
   right: 20px;
}